<template>
    <CommonCard title="今日用户交易数" :value="reportData.userToday">
        <template #default>
            <v-chart :option="option"></v-chart>
        </template>
        <template #footer>
            <span>退货率</span>
            <span class="css-1">{{ reportData.returnRate }}%</span>
        </template>
    </CommonCard>
</template>

<script setup>
import { ref, watch } from 'vue'
import CommonCard from './CommonCard.vue'

const props = defineProps({
    reportData: {
        type: Object,
        required: true,
    },
})

const option = ref({})

const renderChart = (data) => {
    option.value = {
        xAxis: {
            type: 'category',
            show: false,
            data: [
                '00:00',
                '03:00',
                '05:00',
                '07:00',
                '09:00',
                '11:00',
                '13:00',
                '15:00',
                '17:00',
                '19:00',
                '21:00',
                '23:00',
            ],
        },
        yAxis: {
            show: false,
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
        },
        tooltip: {},
        series: {
            // tooltip需要在series数据中, 设置name属性
            name: '实时交易量',
            type: 'bar',
            data: data,
            barWidth: '60%',
        },
    }
}

watch(props, () => {
    renderChart(props.reportData.orderUserTrend)
})
</script>

<style scoped></style>